<!-- 邀请链接组件  -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 邀请供应商 </template>
    <div v-if="flag === 1">
      <div class="title">
        <a-tooltip content="This is a Tooltip" position="lt">
          <icon-info-circle-fill
            :style="{
              color: '#165DFF',
            }"
          />
        </a-tooltip>
        <span
          :style="{
            marginLeft: '10px',
          }"
          >请下载二维码，向企业分享此邀请码，永久链接</span
        >
      </div>
    </div>
    <div v-else>
      <div class="title">
        <a-tooltip content="This is a Tooltip" position="lt">
          <icon-info-circle-fill
            :style="{
              color: '#165DFF',
            }"
          />
        </a-tooltip>
        <span>请复制该链接，向企业分享此邀请，永久链接</span>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, ref, watchEffect } from 'vue';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      flag: number; // 判断是显示二维码还是链接 1:是二维码 2是链接
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addDecisonEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let currForm = ref<any>({
    demandInfo: '',
    decision: '',
  });

  watchEffect(() => {
    if (modalVisible.value) currForm.value = cloneDeep(props.form);
  });

  // 保存
  const handleOk = async () => {
    modalVisible.value = false;
    emit('addDecisonEmit', currForm.value);
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .title {
    text-align: center;
  }
</style>
